import React, { Component } from 'react'
import { Toast } from 'antd-mobile';
import Header from '../../components/Header';
import './Shop.less'
import { reqShopDel, reqShopedit } from '../../http/api';
import have from '../../assets/img/have.jpeg'
import no from '../../assets/img/no.jpeg'
import './ShopList/ShopList.less'
// 引入过滤器
import { filterPrice } from '../../filter';
// 改为容器组件
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux';
import { actions, getAll, getAllPrice, getShopList } from '../../store/modules/shop';
import { getInfo } from '../../store/modules/login';
class Shop extends Component {

    constructor() {
        super()
        this.state = {
            // 初始化
            shoplist: [],
            // 初始化总价
            allChecked: false,//默认为不选中
            isRequest: true,
            arr: 0
        }
    };

    componentDidMount() {
        console.log(this.props);
        let { shop: { reqShopListAction } } = this.props
        reqShopListAction()
    }
    sub(id, num) {
        if (num <= 1) {
            Toast.info('宝贝不能再减少了');
            return;
        }
        let { isRequest } = this.state
        if (isRequest) {
            // 关掉开关
            isRequest = false
            //  发请求
            reqShopedit({
                token: JSON.parse(sessionStorage.getItem('info')).token,
                type: 1,
                id
            }).then(res => {
                // 渲染列表
                this.show_list()

            })
        }

    }



    render() {
        console.log(this.props);
        let { shopList, all, shop: { changeOne, allChecked, delAction, shopAdd, shopSub }, allPrice } = this.props
        // 计算总价
        /*  let allPrice = shoplist.reduce((val, item) => {
             return item.checked ? val += item.price * item.num : val
         }, 0) */
        return (
            <div className="shop">
                <Header title="购物车" back></Header>
                <div className="shop_nav">
                    <ul>
                        <li>销量</li>
                        <li>特价</li>
                        <li>降价</li>
                    </ul>
                </div>
                <div>

                    {<div onClick={() => allChecked()}>
                        全选：  <img style={{ width: '0.3rem', height: '0.3rem' }} src={all ? have : no} alt="" />
                    </div>
                    }
                    总价：{filterPrice(allPrice)}
                </div>
                <div className="shoplist">
                    <ul>
                        {
                            shopList.map((item, index) => {
                                return (
                                    <li key={item.id}>
                                        <div className="left">
                                            <div className="xuanze_img" onClick={() => changeOne(index)} >
                                                <img src={item.checked ? have : no} alt="" />
                                            </div>
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div className="right">
                                            <p>{item.goodsname}</p>
                                            <div>数量：{item.num}</div>
                                            <div>价格：{item.price}</div>
                                            <button onClick={() => shopSub(item.id, item.num)}>-</button>
                                            <span>{item.num}</span>
                                            <button onClick={() => shopAdd({ id: item.id, type: 2 })}>+</button>
                                            <button className="del" onClick={() => delAction({ id: item.id })}>删除</button>
                                        </div>
                                    </li>
                                )
                            })
                        }

                    </ul>

                </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        shopList: getShopList(state),
        info: getInfo(state),
        all: getAll(state),
        allPrice: getAllPrice(state)
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        // 整合
        shop: bindActionCreators(actions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Shop)